<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="keywords" content="">
    <meta name="description" content="">

    <title>确认订单</title>
    <jsp:include page="/static/front/common/links.jsp" flush="true"/>
</head>
<body class="graybg-theme">

<jsp:include page="/static/front/common/header.jsp" flush="true"/>
<jsp:include page="/static/front/common/search.jsp" flush="true"/>

        <div class="cart-header wrapper">
            <div class="logo">
                <a href="index.html"><img src="${ROOT_PATH}/static/front/img/logo.png" alt="logo" /></a>
            </div>
            <div class="step-box">
                <div class="row">
                    <div class="step first active col-3">
                        <span class="num">1</span><span class="line"></span><span class="label">我的购物车</span>
                    </div>
                    <div class="step active col-3">
                        <span class="num">2</span><span class="line"></span><span class="label">确认订单信息</span>
                    </div>
                    <div class="step col-3">
                        <span class="num">3</span><span class="line"></span><span class="label">选择支付方式</span>
                    </div>
                    <div class="step last col-3">
                        <span class="num">4</span><span class="line"></span><span class="label">完成付款</span>
                    </div>
                </div>
            </div>
        </div>
    <!--头部-->

    <div class="wrapper confirm-wrap">
        <div class="confirm-tit">
            <span class="tit">选择收货地址 :</span>
        </div>
        <div class="confirm-address clearfix">
            <div class="col col-4">
                <div class="item active">
                    <div class="action">
                        <a class="edit" href="javascript:;">修改</a>
                    </div>
                    <div class="info">
                        <div class="ellipsis"><img src="img/ico/user.jpg" alt="" />安徽合肥（唐霞 收）</div>
                        <div class="ellipsis"><img src="img/ico/dizhi.jpg" alt="" />高新长江西路拓基城市广场金座A2002</div>
                        <div class="ellipsis"><img src="img/ico/tel.jpg" alt="" />15866887799</div>
                    </div>
                </div>
            </div>
            <div class="col col-4">
                <div class="item">
                    <div class="action">
                        <a class="edit" href="javascript:;">修改</a>
                    </div>
                    <div class="info">
                        <div class="ellipsis"><img src="img/ico/user.jpg" alt="" />安徽合肥（唐霞 收）</div>
                        <div class="ellipsis"><img src="img/ico/dizhi.jpg" alt="" />高新长江西路拓基城市广场金座A2002</div>
                        <div class="ellipsis"><img src="img/ico/tel.jpg" alt="" />15866887799</div>
                    </div>
                </div>
            </div>
            <div class="col col-4">
                <div class="item">
                    <div class="action">
                        <a class="edit" href="javascript:;">修改</a>
                    </div>
                    <div class="info">
                        <div class="ellipsis"><img src="img/ico/user.jpg" alt="" />安徽合肥（唐霞 收）</div>
                        <div class="ellipsis"><img src="img/ico/dizhi.jpg" alt="" />高新长江西路拓基城市广场金座A2002</div>
                        <div class="ellipsis"><img src="img/ico/tel.jpg" alt="" />15866887799</div>
                    </div>
                </div>
            </div>
            <div class="col col-4">
                <a class="item va-m-box ta-c add">
                    <div class="add-new">
                        <span class="ico"><i class="iconfont icon-tianjia"></i></span>
                        <div class="label">添加收货地址</div>
                    </div>
                </a>
            </div>
        </div>
        <div class="confirm-address-bar"  style="display: none;">
            <a href="javascript:;" class="drop" data-action="drop">显示全部地址</a>
        </div>

        <div class="confirm-tit">
            <span class="tit">发票 :</span>
        </div>
        <div class="control-group">
            <div class="hd">
                发票抬头：
            </div>
            <div class="bd">
                <select class="ui-txtin" name="" id=""><option value="">个人</option></select>
                <input class="ui-txtin" style="width: 300px;"  type="text" name="" id="" />
            </div>
        </div>
        <div class="confirm-tit">
           <span class="tit">确认商品信息:</span><div class="right"><a class="back" href="confirm.jsp">返回购物车></a></div>
        </div>
        <div class="confirm-goods">
            <div class="confirm-goods-hd clearfix">
                <div class="col col1">店铺：小米旗舰店</div>
                <div class="col col2">单价（元）</div>
                <div class="col col3">数量</div>
                <div class="col col4">小计（元）</div>
            </div>
            <div class="confirm-goods-bd">
                <div class="goods clearfix">
                    <div class="col col1">
                        <img src="uploads/11.jpg" alt="">
                        <div class="info">
                            <div class="name">小米短袖T恤 五彩换</div>
                            <div class="meta"><span>黑色</span><span>S</span></div>
                        </div>
                    </div>
                    <div class="col col2">￥499.00</div>
                    <div class="col col3">2</div>
                    <div class="col col4">￥988.00</div>
                </div>
            </div>
            <div class="confirm-goods-ft clearfix">
                <div class="fl"><span class="vm-ib">买家留言： </span><textarea class="ui-txtin" style="width: 410px;" name="" placeholder="在此输入给商家的留言"></textarea></div>
                <div class="fr">店铺合计(含运费): ¥1922.00</div>
            </div>
        </div>
        <div class="confirm-goods">
            <div class="confirm-goods-hd clearfix">
                <div class="col col1">店铺：小米旗舰店</div>
                <div class="col col2">单价（元）</div>
                <div class="col col3">数量</div>
                <div class="col col4">小计（元）</div>
            </div>
            <div class="confirm-goods-bd">
                <div class="goods clearfix">
                    <div class="col col1">
                        <img src="uploads/11.jpg" alt="">
                        <div class="info">
                            <div class="name">小米短袖T恤 五彩换</div>
                            <div class="meta"><span>黑色</span><span>S</span></div>
                        </div>
                    </div>
                    <div class="col col2">￥499.00</div>
                    <div class="col col3">2</div>
                    <div class="col col4">￥988.00</div>
                </div>
            </div>
            <div class="confirm-goods-ft clearfix">
                <div class="fl"><span class="vm-ib">买家留言： </span><textarea class="ui-txtin" style="width: 410px;" name="" placeholder="在此输入给商家的留言"></textarea></div>
                <div class="fr">店铺合计(含运费): ¥1922.00</div>
            </div>
        </div>
         <div class="confirm-total">
            <div class="box">
                <div class="item">应付总额：<strong> ¥ 1936.00</strong></div>
                <a class="ui-btn-theme go-charge" href="${ROOT_PATH}/order/pay">去结算</a>
            </div>
        </div>
    </div>

    <!--脚部-->
    <div class="fatfooter">

    </div>
    <!--脚部-->
    <div id="addressform" style="display:none" class="layer-address">
        <form action="confirm.jsp">
            <div class="control-group">
                <div class="hd">
                    收货人姓名：
                </div>
                <div class="bd">
                    <input class="ui-txtin ui-txtin-thin" style="width: 200px;" type="text" name="" id="">
                </div>
            </div>
            <div class="control-group">
                <div class="hd">
                    联系电话：
                </div>
                <div class="bd">
                    <input class="ui-txtin ui-txtin-thin" style="width: 200px;" type="text" name="" id="">
                </div>
                <div class="hd">或固定电话：</div>
                <div class="bd">
                    <input class="ui-txtin ui-txtin-thin" style="width: 200px;" type="text" name="" id="">
                </div>
            </div>
            <div class="control-group">
                <div class="hd vat">
                    所在地区：
                </div>
                <div class="bd">
                    <select class="ui-txtin ui-txtin-thin" style="width: 180px;" name="">
                        <option value="">选择省</option>
                    </select>
                    <div class="mt10">
                        <input class="ui-txtin ui-txtin-thin" style="width: 560px;" type="text" name="" id="" placeholder="请填写具体地址，不需要重复填写省/市/区">
                    </div>
                </div>
            </div>
            <div class="control-group">
                <div class="hd vat">
                    邮政编码：
                </div>
                <div class="bd">
                    <input class="ui-txtin ui-txtin-thin" style="width: 200px;" type="text" name="" id="">
                </div>
            </div>
            <div class="control-bottom clearfix">
                <a href="confirm.jsp" class="fl btn ui-btn-theme">保存</a><a href="confirm.jsp" class="fr btn ui-btn cancle">取消</a>
            </div>
        </form>
    </div>
</body>
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="js/icheck/style.css"/>
<script src="js/icheck/icheck.min.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/global.js"></script>
<script>
//这里不使用自带按钮，因为设计按钮较特殊，不准备作为通用样式
$('.confirm-address .edit,.confirm-address .add').on('click',function () {
    layer.open({
        type: 1,
        skin: 'layui-layer-seaing',
        title: '标题',
        area: ['720px', 'auto'],
        content: $('#addressform')
        //btn: ['按钮一', '按钮二']
    });
});
$(document.body).on('click','.layer-address .cancle',function () {
    layer.closeAll();
    return false;
})

//
function juggeAddressNum () {
    var col=$('.confirm-address .col'),
    cH=col.height();
    $('.confirm-address').height(cH)
    if (col.length>3) {
        $('.confirm-address-bar').show();
    }
    else {
        $('.confirm-address-bar').hide();
    }
}
juggeAddressNum();
zAction.add({
    'drop':function () {
        $('.confirm-address').height('auto')
        var h=$('.confirm-address').height()
        juggeAddressNum();
        $('.confirm-address').animate({height: h}, 300);
        $(this).parent().remove();
    }
});
</script>
</html>